<template>
  <div>搜索结果
  <!-- 获取路由中携带的参数  $route 路由信息对象 使用的是query传参 $route.query.xxx-->
  <!-- {{$route.query.name}} -->
  <!-- 使用 params传参 在组件中获取 使用 $route.params.xxx -->
  {{$route.params.name}}
 </div>
</template>

<script>
export default {
  created () {
    console.log(this.$route)
    // 使用params携带参数地址栏中不会显示 , 必须使用name 命名路由跳转
    // 虽然参数携带了,但是刷新会丢失? 解决的方式 配合本地存储(cookie||localStorage)
    // 场景少， 知道
    // 问??? 路由传参 query 和 params
    // query 特点 会在地址栏中显示携带的参数   取 this.参 $route,query.xxx
    // params 必须使用命名路由跳转 ,携带的不会在地址栏中显示, 刷新会丢失 (配合本地存储)
    if (this.$route.params.name) {
      // 赶紧存下来
      localStorage.setItem('info', JSON.stringify(this.$route.params))
    }
    console.log(JSON.parse(localStorage.getItem('info')))
  }
}
</script>

<style>

</style>
